iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 7
0
Modern Web

網頁阿尼尛,到底是在幹尛?系列 第 7

第六章、和我簽訂契約,成為魔法少女吧! Transform 3D (上篇)

  • 分享至 

  • xImage
  •  

前言

上一篇文章我們提到了如何用 CSS 屬性在網頁 2D 空間內移動變化,但是你以為這樣就夠了嗎? NoNoNo~ 既然在網頁上有 2D 空間的變化,當然也有 3D 空間的變化囉~

今天就讓我們來好好聊聊如何在網頁上讓元素看起來更有立體感吧!

簡介

通常來說,元素是渲染在平面上並且和畫面佈局的 疊層上下文 為同一平片。
而對於網頁來說,可以將 3D 變化視為一種建立在 2D 平面上的繪圖效果,好讓 2D 元素看起來像是 立體的 3D 元素。

舉例來說:給予元素數值使其在 Z軸 上移動,會讓元素看起來有放大縮小的效果(物體與攝影框的遠近距離關係,但並不會因此讓元素的圖層位置變換。

Perspective 透視

既然有了三維空間的產生,我們就可以來 透視 元素啦!

所謂的透視指的是什麼呢?透視在繪畫技法內通常被稱作 遠近法,即是 為了呈現物體遠近距離感 的構圖技巧,距離視角近的物體要畫的大一點,距離視角遠的物體要畫小一點。

圖片來源:三维图像投影变换——透视投影

而 W3C 內則解釋:

在上方第一張圖中,Z 的距離為 d 距離的一半。為了使原始的圓形(實線圓形)大小看起來和 Z (虛線圓形)一樣,我們需要將原始圓形放大兩倍,視覺效果才會一樣。

在下方第二張圖中,Z (虛線圓形)按照比例縮小了三分之一,所以在視覺上看起來會像是在原始圓形的後方。

通常我們會以觀看者視角為圖形中心點,所以如果需要,我們可以透過 perspective-origin 來設定視角位置。

如圖所示,當我們調整 perspective-origin 後,就看不到圓形的下半部了。

3D Rendering Contexts

在 3D 渲染的環境中,3D 元素的渲染是建立在 root 跟元素上,元素與根元素的關係被認為是共享同一個三維座標系統。在 3D 渲染上下文中的元素是由前往後渲染的,而其渲染的位置取決於元素在三維空間中的 Z軸 位置,並且要是對這些 3D 元素 進行轉換,導致元素相交,則他們會以相交的方式進行渲染。

三維空間中的元素渲染與建立方式如下:

  • 3D 渲染上下文是由可變形之元素建立而成,該元素的 transfrom-style 預設值為 flat,為了建立三維空間,我們可以將 transfrom-style 值改為 preserve-3d
  • 若是對外層父元素下語法 preserve-3d 則內層子元素同樣也參與三維空間之內,而不是內層子元素也建立一個新的三維空間。

Transform 3D 基礎語法

transforme: Function values(X, Y, Z)
名稱 說明
Function value 依據CSS數據類型影響的元素外觀轉換
X X軸上的變化數值(單位或百分比)
Y Y軸上的變化數值(單位或百分比)
Z X軸上的變化數值(單位或百分比)

在以下 3D 函數變化中,因瀏覽器支援度問題,保留了 zero 的值,其行為跟,[0deg]值的行為一樣。

matrix3d()

以 4x4 齊次矩陣算法計算 3D Transfrom 轉換值。當我們需要元素同時做到 位移、旋轉、變形 的效果。
參考資料

Translate

透過向量定位 [tx,ty,tz] 來指定 3D Translation 的位置,txX軸數值 tyY軸 數值 tzZ軸 數值。

scale3d()

透過向量定位 [sx, sy, sz] 來指定 3D Translation 的縮放。若兩向量的座標相等,則縮放比例是均勻向四周縮放。

rotate3d()

完整語法:

rotate3d(rx, ry, rz, angle)

透過向量定位 [rx, ry, rz] 來指定 3D Translation 的旋轉方向,並透過 [angle] 來指定旋轉角度,這個屬性 使元素沿著固定軸移動 而不會造成變形。
較特別的是,前三個數值是有被嚴格定義的,若前三個值的平方總和相加不等於1,則旋轉無法作用。而 angle 正值代表順時鐘旋轉、負值代表逆時鐘旋轉。

與 2D rotate 相反,3D rotate 的值通常是不能交換的,這意味著我們在給定旋轉軸的順序是非常重要的。


沿著 X軸 旋轉:rotate3d(rx)


沿著 Y軸 旋轉:rotate3d(ry)


沿著 Z軸 旋轉:rotate3d(rz)

perspective()

完整語法:

perspective(length)

perspective 屬性即是指定透視投影的矩陣運算。其讓元素沿著 Z軸 移動。當 Z = 0 時,為元素與觀看者的距離,Z > 0 時該元素的三維空間比正常值大,而 Z < 0 時則比正常的值小

由於過小的 [length] 值會產生奇怪的渲染結果,因此該屬性強調計算數值的準確度,若計算出來的渲染結果值小於 1px,則會被視為 1px。

而若使用 none 值,計算轉換會視為類似於無限的 [length] 值。這樣的值在畫面渲染上看起來會像是平面的。因此,此屬性除了 none 值以外的任何其他值一起使用,將會建立堆疊上下文。就像 2D Transfrom 語法一樣,他也會為後代元素建立 block container。

backface-visibility

上面介紹完 Transfrom 3D 有哪些可以運用的基礎語法後,這邊也要提到一個很特別的語法,稱作 backface-visibility

這個屬性即是使該元素 只能從正面看見元素,背面是不可見(被隱藏起來),所以即便初始狀態是 hidden ,因為沒有翻轉到背面,也看不出來背面是否有被隱藏。

由於影響的是 元素背面,所以在 Transfrom 2D 沒有透視的狀況,是沒有效果的。


元素「2」的背面(紅色區塊)為 visible ,元素「1」調整透明度後即可看見 元素「2」的背面。


元素「2」的背面(紅色區塊)為 hidden(等同於被隱藏起來) ,所以即使元素「1」調整透明度仍然看不見 元素「2」

完整語法:

backface-visibility: (visible|hidden);

visible

背面朝著觀看者時,會顯現出來,並且為正面的鏡射狀態。

hidden

背面朝著觀看者時,會隱藏起來,雖實體仍存在於文檔流中,但可視為元素消失(即該元素變透明看到元素後方的其他元素)。


看到這邊,大家是不是也被 3D 空間的轉換搞得暈頭轉向的呢?
但是,已經沒什麼好害怕的了!因為明天我會帶著各位魔法少女(男)們實際練習一遍魔法召喚,相信大家實做完畢之後,又會朝著魔法少女(男)之路大大地向前邁進了呢!

那麼我們明天見~


參考資料


上一篇
第五章、上上下下左左右右AB Transform
下一篇
第七章、和我簽訂契約,成為魔法少女吧! Transform 3D (下篇)
系列文
網頁阿尼尛,到底是在幹尛?30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言